<template>
  <div>
    <div id="pieReport" style="width: 1000px;height: 600px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'club-sta',
  data () {
    return {
      charts: '',
      opinionData: [
        {value: 12, name: '及格人数'},
        {value: 18, name: '未及格人数'}
      ]
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.$http({
        url: this.$http.adornUrl(`/club/clubinfo/pie`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.opinionData = data.pie
          this.$nextTick(function () {
            this.drawPie('pieReport')
          })
        }
      })
    },
    drawPie (id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        series: [
          {
            name: '状态',
            type: 'pie',
            radius: '90%',
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function (params) {
                // 自定义颜色
                var colorList = ['#1ab394', '#79d2c0']
                return colorList[params.dataIndex]
              }
            },
            data: this.opinionData
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
